/**
 * 图片URL处理辅助工具 - Vue版本
 * 用于解决图片上传和显示问题
 */

// 全局变量，存储已上传的图片URL
const uploadedImages = {};

/**
 * 修复图片URL问题
 * @param {String} originalUrl 原始URL
 * @returns {String} 修复后的URL
 */
export function fixImageUrl(originalUrl) {
  // 如果URL为空，返回空字符串
  if (!originalUrl) return '';
  
  // 如果是完整URL，直接返回
  if (originalUrl.startsWith('http://') || originalUrl.startsWith('https://')) {
    return originalUrl;
  }
  
  // 如果是Upload目录下的图片
  if (originalUrl.startsWith('/upload/images/')) {
    // 添加服务器地址前缀，确保使用Spring Boot后端的端口
    return `http://localhost:5855${originalUrl}`;
  }
  
  return originalUrl;
}

/**
 * 获取备用图片URL列表
 * @param {String} originalUrl 原始URL
 * @returns {Array} 备用URL列表
 */
export function getBackupImageUrls(originalUrl) {
  const backupUrls = [];
  
  // 始终添加原始URL作为第一个选项
  backupUrls.push(originalUrl);
  
  if (originalUrl && originalUrl.startsWith('/upload/images/')) {
    // 解析路径
    const parts = originalUrl.split('/');
    if (parts.length >= 4) {
      const date = parts[2];
      const filename = parts[3];
      
      // 添加各种可能的URL格式 - 确保端口号5855与Spring Boot应用一致
      backupUrls.push(`http://localhost:5855/upload/images/${date}/${filename}`);
      backupUrls.push(`http://localhost:5855/static/upload/images/${date}/${filename}`);
      backupUrls.push(`/upload/images/${date}/${filename}`);
      backupUrls.push(`/static/upload/images/${date}/${filename}`);
      
      // 针对与API不同端口的情况
      if (window.location.port !== '5855') {
        const apiPort = '5855'; // Spring Boot应用端口
        const host = window.location.hostname;
        backupUrls.push(`http://${host}:${apiPort}/upload/images/${date}/${filename}`);
        backupUrls.push(`http://${host}:${apiPort}/static/upload/images/${date}/${filename}`);
      }
    }
  }
  
  // 删除重复项
  return [...new Set(backupUrls)];
}

/**
 * 记录上传的图片信息
 * @param {String} url 图片URL
 * @param {Object} metadata 元数据
 */
export function registerUploadedImage(url, metadata) {
  if (url) {
    uploadedImages[url] = metadata || {
      timestamp: new Date().getTime(),
      backupUrls: getBackupImageUrls(url)
    };
  }
}

/**
 * 检查图片是否可访问
 * @param {String} url 图片URL
 * @returns {Promise<string>} 可访问的URL或错误信息
 */
export function checkImageAccessibility(url) {
  return new Promise((resolve, reject) => {
    if (!url) {
      reject('URL为空');
      return;
    }
    
    console.log('检查图片可访问性:', url);
    
    // 获取所有可能的URL
    const backupUrls = getBackupImageUrls(url);
    console.log('备用URL列表:', backupUrls);
    
    let attemptCount = 0;
    const maxAttempts = backupUrls.length;
    
    function tryNextUrl(index) {
      if (index >= maxAttempts) {
        reject('所有URL尝试均失败');
        return;
      }
      
      const currentUrl = backupUrls[index];
      console.log(`尝试URL ${index+1}/${maxAttempts}: ${currentUrl}`);
      
      // 添加时间戳防止缓存
      const timestampedUrl = currentUrl.includes('?') 
        ? `${currentUrl}&t=${Date.now()}` 
        : `${currentUrl}?t=${Date.now()}`;
      
      const img = new Image();
      img.onload = () => {
        console.log('图片加载成功:', currentUrl);
        resolve(currentUrl);
      };
      
      img.onerror = () => {
        console.log('图片加载失败:', currentUrl);
        // 尝试下一个URL
        setTimeout(() => tryNextUrl(index + 1), 100);
      };
      
      img.src = timestampedUrl;
    }
    
    // 开始尝试第一个URL
    tryNextUrl(0);
  });
}

/**
 * 处理编辑器中的Markdown图片
 * @param {String} markdown Markdown内容
 * @returns {String} 处理后的Markdown
 */
export function processMarkdownImages(markdown) {
  if (!markdown) return '';
  
  // 匹配Markdown图片语法 ![alt](url)
  const imgRegex = /!\[([^\]]*)\]\(([^)]+)\)/g;
  
  return markdown.replace(imgRegex, (match, alt, url) => {
    // 如果是上传目录的图片，处理URL
    if (url.startsWith('/upload/images/')) {
      // 缓存原始URL
      registerUploadedImage(url);
      // 返回带有时间戳的URL，防止缓存
      return `![${alt}](${url}?t=${Date.now()})`;
    }
    return match; // 不是上传的图片，保持不变
  });
}

/**
 * Vue指令 - 自动修复图片URL
 */
export const ImageUrlDirective = {
  install(app) {
    app.directive('img-url', {
      mounted(el, binding) {
        const originalUrl = binding.value;
        
        // 设置加载中的占位图
        el.setAttribute('src', '');
        
        // 尝试加载图片
        checkImageAccessibility(originalUrl)
          .then(accessibleUrl => {
            el.setAttribute('src', accessibleUrl);
          })
          .catch(err => {
            console.error('图片加载失败:', err);
            // 设置默认占位图
            el.setAttribute('src', '/images/placeholder.png');
          });
      },
      updated(el, binding) {
        // 如果URL改变，重新尝试加载
        if (binding.oldValue !== binding.value) {
          // 设置加载中的占位图
          el.setAttribute('src', '');
          
          // 尝试加载图片
          checkImageAccessibility(binding.value)
            .then(accessibleUrl => {
              el.setAttribute('src', accessibleUrl);
            })
            .catch(err => {
              console.error('图片加载失败:', err);
              // 设置默认占位图
              el.setAttribute('src', '/images/placeholder.png');
            });
        }
      }
    });
  }
}; 